<script setup>
import {cancelOrder} from '@/api/MallManage/order.js'
import { ElMessage } from 'element-plus';
  const props = defineProps({
    show:{
      type:Boolean,
      default:false
    },
    detail:{
      type:Object,
      default:()=>({})
    }
  })
  const loading = ref(false)
  const cancelMsg = ref('')

  const emit = defineEmits(['update:show','success'])
  const handleClose = () => {
    cancelMsg.value = ''
    emit('update:show',false)
  }
  const confirm = async () => {
    try{
      loading.value = true
      const res = await cancelOrder({
        id:props.detail.orderId,
        flag:true,
        cancelMsg:cancelMsg.value
      })
      const state = res.indexOf('失败') > -1 ? 'error':'success'
      ElMessage({
          type: state,
          message: res
      });
      emit('success')
    }finally{
      loading.value = false
    }
  }
</script>

<template>
  <el-dialog
    :model-value="show"
    title="订单取消"
    width="380"
    :before-close="handleClose"
  >
    <div>
      <el-input v-model="cancelMsg" :rows="4" resize="none" type="textarea" placeholder="请输入取消原因" />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button round @click="handleClose">取消</el-button>
        <el-button round type="primary" @click="confirm">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>

</style>